Visual Design of User Interfaces by (De)composition

Most existing graphical user interfaces are usually designed for a fixed context of use, thus making them rather difficult to modify for other contexts of use, such as for other users, other platforms, and other environments. This paper addresses this problem by introducing a new visual design method for graphical users interfaces referred to as “visual design by (de)composition”. In this method, any individual or composite component of a graphical user interface is submitted to a series of operations for composing a new interface from existing components and for decomposing an existing one into smaller pieces that can be used in turn for another interface. For this purpose, any component of a user interface is described by specifications that are consistently written in a user interface description language that remains hidden to the designers’ eyes. We first define the composition and decomposition operations and individually exemplify them on some small examples. We then demonstrate how they can be used to visually design new interfaces for a real-world case study where variations of the context of use induce frequent recomposition of user interfaces. Finally, we describe how the operations are implemented in a dedicated interface builder supporting the aforementioned method.